<template>
	<page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
	<view>
		<view class="container-view">
			<view class="rounded-card first-item">
				<view class="top-view">
					<view class="title-text">服务信息</view>
					<view class="add-server-btn" @click="showServicePopup" v-if="false">
						<image src="../../static/littlebtn_add.png" class="icon"></image>
						添加护理服务
					</view>
				</view>
				<view class="item-row" :key="index" v-for="(item, index) in medicalProjectList">
					<view class="sub-item-title">预约项目{{ index + 1 }}</view>
					<view class="sub-item-name">{{ item.proName }}</view>
					<view class="del-btn" v-show="index > 0" @click="removeServicePopupItem(index)">
						<image src="../../static/item_delete.png" class="icon"></image>
					</view>
				</view>
				<view class="cost-list" v-if="currentHospital">
					<!-- 					<view class="row">
						<view class="left">上门服务费：</view>
						<view class="right">
							<cn-money :money="currentPrices.onsiteServiceFee | numFilter" :size="48"></cn-money>
						</view>
					</view> -->
					<!-- 					<view class="row">
						<view class="left">医疗服务费：</view>
						<view class="right">
							<cn-money :money="currentPrices.medicalServiceFee | numFilter" :size="48"></cn-money>
						</view>
					</view> -->
					<!-- 					<view class="row">
						<view class="left">物料耗材费：</view>
						<view class="right">
							<cn-money :money="currentPrices.materialFee | numFilter" :size="48"></cn-money>
						</view>
					</view> -->
					<view class="row">
						<view class="left">费用：</view>
						<view class="right">
							<cn-money :money="currentPrices.totalServiceFee | numFilter" :size="48"></cn-money>
						</view>
					</view>
				</view>
			</view>
		<!-- 	<view class="form-item"> 
				<view class="label">选择耗材包</view>
				<view class="select-view" @click="navToChooseHospital">
					<view class="placeholder" v-if="!currentHospital">请选择</view>
					<view v-else>{{ currentHospital.hospitalName }}</view>
					<image src="../../static/item_go.png" class="icon"></image>
				</view>
			</view> -->

			<view class="rounded-card-no-padding">
				<view class="form-item">
					<view class="label">就诊人</view>
					<view class="select-view" @click="showSelectPatientDialog">
						<view class="placeholder" v-if="!currentPatientInfo.uid">请选择</view>
						<view v-else>{{ currentPatientInfo.patientName }}</view>
						<image src="../../static/item_go.png" class="icon"></image>
					</view>
				</view>
				<view class="form-item" v-if="nurse.hospitalName">
					<view v-if="nurse.uid">
					<view class="label">选择护士</view>
					<view class="select-view">
						<view >{{ nurse.nurseName }}</view>
						<image src="../../static/item_go.png" class="icon"></image>
					</view>
					<view class="label">选择医院</view>
						<view class="select-view">
							<view >{{ nurse.hospitalName }}</view>
							<image src="../../static/item_go.png" class="icon"></image>
						</view>
					
					</view>
					<view v-else>
					<view class="label">选择医院</view>
						<view class="select-view">
							<view >{{ nurse.hospitalName }}</view>
							<image src="../../static/item_go.png" class="icon"></image>
						</view>
					</view>
					
					
				</view>
				<view class="form-item" v-else>
					<view class="label">选择医院</view>
					<view class="select-view" @click="navToChooseHospital">
						<view class="placeholder" v-if="!currentHospital">请选择</view>
						<view v-else>{{ currentHospital.hospitalName }}</view>
						<image src="../../static/item_go.png" class="icon"></image>
					</view>
				</view>
				
				<view class="form-item" v-if="rule">
					<view class="label">选择规格</view>
					<view class="select-view" @click="navToChooseRule">
						<view class="placeholder" v-if="!currentHospitalRule">请选择</view>
						<view v-else>{{ currentHospitalRule.proName }}</view>
						<image src="../../static/item_go.png" class="icon"></image>
					</view>
				</view>
				
				<view class="form-item">
					<view class="label">服务时间</view>
					<view class="date-picker-view">
						<picker style="width: 100%" mode="date" :start="today" @change="onDatePickerChange">
							<view class="date-picker-inner">
								<view class="content">
									<view>{{ date }}</view>
								</view>
								<image src="../../static/item_go.png" class="icon"></image>
							</view>
						</picker>
					</view>
				</view>
				<view class="tip-view">
					<image src="../../static/item_warn.png" style="width: 28rpx; height: 28rpx; margin-right: 6rpx">
					</image>
					温馨提示：具体服务时间医院评估后会与您确认
				</view>
			</view>

			<view class="rounded-card">
				<view class="title-text requires">诊断证明</view>
				<view class="description-view">
					（住院记录/诊断证明/伤口照片/病历/被护理人实时照片等）
				</view>
				<view class="upload-grid-view">
					<view class="upload-image" v-for="(item, index) in imageList">
						<image :src="item"></image>
						<uni-icons type="clear" class="icon" size="26" @click="removeImage(index)"></uni-icons>
					</view>
					<view class="upload-view" v-if="imageList.length < 9" @click="uploadImage">
						<image src="../../static/pic_add.png" class="icon"></image>
						<view>上传图片</view>
					</view>
				</view>
			</view>

			<view class="rounded-card">
				<view class="title-text">情况描述</view>
				<view class="description-input-view">
					<textarea v-model="situationDesc" placeholder-class="textarea-placeholder"
						placeholder="可填写备注信息；如特殊要求、身体状态或病症">
          </textarea>
				</view>
			</view>
		</view>

		<view class="bottom-fixed-view">
			<view class="agreement-view">
				<view class="select-button" @click="radioClick">
					<image src="../../static/tab_select_have.png" v-if="radioSelected"></image>
					<image src="../../static/tab_select_not.png" v-else></image>
				</view>
				<view class="text">我同意</view>
				<view class="item">《知情同意书》</view>
				<view class="text">和</view>
				<view class="item">《保险须知》</view>
			</view>
			<view class="pay-view">
				<!-- <view>付款：</view> -->
				<!-- <cn-money :money="totalMoney" :size="48"></cn-money> -->
				<view class="show-details">
					<!-- 查看明细 -->
					<!-- <image src="../../static/tab_view_arrow.png" class="icon"></image> -->
				</view>
				<view class="pay-btn" @click="submit()">提交订单</view>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom" @change="patientDialogchange">
			<view class="popup-view">
				<view class="title-view">
					<view class="title">选择就诊人</view>
					<view class="close-btn-view" @click="closeSelectPatientDialog">
						<image src="../../static/pop_close.png" class="close-btn"></image>
					</view>
				</view>

				<view>
					<scroll-view scroll-y="true">
						<view class="item" v-for="(item, index) in patientInfoList">
							<view class="select-button" style="margin-right: 10rpx" @click="onPatientInfoChange(index)">
								<image src="../../static/tab_select_have.png" v-if="currentPatientInfoIndex === index">
								</image>
								<image src="../../static/tab_select_not.png" v-else></image>
							</view>
							<view class="right-view">
								<view class="name-view">
									<view>{{ item.patientName }}</view>
									<view class="phone">{{ item.contactPhone }}</view>
								</view>
								<view class="adder-view">
									{{ item.serviceAddress }}&nbsp;{{ item.detailedAddress }}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="add-view">
					<view class="add-btn" @click="navToNewPatient">新增就诊人</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="servicePopup" type="bottom" @change="servicePopupChange">
			<view class="service-popup-view">
				<view class="title-view">
					<view class="title">添加附加服务</view>
					<view class="close-btn-view" @click="closeServicePopup">
						<image src="../../static/pop_close.png" class="close-btn"></image>
					</view>
				</view>

				<view>
					<scroll-view scroll-y="true" refresher-enabled :refresher-triggered="servicePopupTriggered"
						@scrolltolower="servicePopupLoadMore" @refresherrefresh="servicePopupRefresh">
						<view class="item" v-for="(item, index) in servicePopupList"
							@click="servicePopupItemClick(item)">
							<view class="left-view">
								<image :src="item.picImg"></image>
							</view>
							<view class="right-view">
								<view class="name-view">
									<view>{{ item.proName }}</view>
								</view>
								<view class="adder-view three-line-ellipsis">
									{{ item.sketch | htmlToTextFilters }}
								</view>
							</view>
						</view>
						<uni-load-more :status="servicePopupStatus"></uni-load-more>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import * as patientContact from '../../common/api/patientContact.js'
import * as medicalProjects from '../../common/api/medicalProjects.js'
import * as orderInfo from '../../common/api/orderInfo.js'
import * as upload from '../../common/upload.js'
import * as hospitalInfo from "../../common/api/hospitalInfo.js";
import cnMoney from '../../components/cn-money/cn-money'
import {
	mapGetters
} from "vuex";
import PageInfo from '../../utils/pageutils.js';
import * as dateUtils from '@/patientAppPages/utils/dateUtils.js';
import * as wxPay from '../../common/api/wxPay.js'
import * as loginUtils from '../../utils/loginUtils.js'
export default {
	components: {
		cnMoney
	},
	data() {
		return {
			show: false,
			radioSelected: false,
			currentDay: '',
			date: '',
			patientInfoList: [],
			imageList: [],
			medicalProjectUid: '',
			hospitalUid: '',
			medicalProjectList: [],
			type:"",
			currentHospital: null,
			currentHospitalRule: null,
			rule: null,
			nurse: null,
			hospital: null,
			feeRules:'',
			currentPatientInfo: {},
			currentPatientInfoIndex: null,
			servicePopupList: [],
			servicePopupPageInfo: new PageInfo(),
			servicePopupStatus: '',
			serverItems:'',
			materialFee:'',
			totalServiceFee:'',
			servicePopupTriggered: false,
			situationDesc: '',
			form: {

			}
		}
	},
	onLoad(opt) {
		console.log('opt',opt);
		if (opt.uid) {
			this.medicalProjectUid = opt.uid
		}
		if (opt.hospitalUid && opt.type === '医院') {
			this.hospitalUid = opt.hospitalUid
			// this.nurseList()
		}else if(opt.hospitalUid){
			this.hospitalUid = opt.hospitalUid
			// this.nurseList()
		}
		this.initMedicalProjectList()
		this.date = new Date().format('yyyy-MM-dd')
		this.currentDay = this.date
		this.serverItems = opt.serverItems
	},
	computed: {
		...mapGetters({
			pageInfo: "page/pageInfo",
		}),
		totalReferencePrice() {
			const list = this.medicalProjectList || []
			let sum =
			list.forEach(e => {
				sum += Number.parseFloat(e.referencePrice)
			})
			return sum
		},
		totalMoney() {
			let sum = 0
			const currentHospital = this.currentHospital
			const currentHospitalRule = this.currentHospitalRule
			if (!this.currentHospital) {
				return 0
			}else if(this.currentHospitalRule){
				const serverItems = currentHospitalRule.serverItems || []
				serverItems.forEach(e => {
					sum += Number.parseFloat(e.totalServiceFee)
				})
			}else{
				const serverItems = currentHospital.serverItems || []
				serverItems.forEach(e => {
					sum += Number.parseFloat(e.actualPrice)
		})		
			}
			return sum
		},
		totalMoneyRule() {
			let sum = 0
			const currentHospitalRule = this.currentHospitalRule
			if (!this.currentHospitalRule) {
				return 0
			}else if(this.currentHospitalRule){
				const serverItems = currentHospitalRule.serverItems || []
				serverItems.forEach(e => {
					sum += Number.parseFloat(e.totalServiceFee)
				})
			}
			return sum
		},
		currentPrices() {
			const currentHospital = this.currentHospital
			const currentHospitalRule = this.currentHospitalRule
			if (!currentHospital) {
				return {}
			}else if(currentHospitalRule){
				return currentHospitalRule.serverItems[0]
			}else{
				return currentHospital.serverItems[0]
			}
			// if (!currentHospitalRule) {
			// 	return currentHospital.serverItems[0]
			// }
			// return currentHospital.serverItems[0]
		},
		today() {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			month = month < 10 ? '0' + month : month;
			day = day < 10 ? '0' + day : day;
			return `${year}-${month}-${day}`;
		}
	},
	filters: {
		numFilter(val) {
			if (!val) {
				return 0
			}
			return parseFloat(val)
		}
	},
	onShow() {
		if (this.pageInfo?.chooseHospital) {
			this.currentHospital = this.pageInfo.chooseHospitalInfo
			this.rule = this.pageInfo.rule[0]
			console.log("rule",this.rule);
			this.$nextTick(() => {
				this.$store.commit("page/setPageInfo", {});
			});
		}
		if (this.pageInfo?.chooseHospitalRule) {
			this.currentHospitalRule = this.pageInfo.chooseHospitalInfoRule
			this.$nextTick(() => {
				this.$store.commit("page/setPageInfo", {});
			});
		}
		if (this.pageInfo?.isAddPatientInfo) {
			this.$nextTick(() => {
				this.$store.commit("page/setPageInfo", {});
			});
		}
		// this.getPatientInfoList()
	},
	methods: {
		initMedicalProjectList() {
			const param = {
				uid: this.medicalProjectUid
			}
			medicalProjects.queryById(param).then(result => {
				this.medicalProjectList.push(result.data.data)
				this.setTitle()
			}).catch(error => {
				console.log(error);
			})
		},
		nurseList() {
			const param = {
				uid: this.hospitalUid
			}
			hospitalInfo.nurse(
				param).then(result => {
				this.nurse = result.data.data || []
			}).catch(error => {
				console.log(error);
			})
			
			hospitalInfo.distanceRule({
				hospitalUid: this.hospitalUid,
				uid: this.medicalProjectUid,
			}).then(res => {
			    this.rule = res.data.data[0]
				console.log("扫码进来的规格", this.rule);
			}).catch(error => {
				console.log(error);
			})
		},
		hospitalList() {
			const param = {
				uid: this.hospitalUid
			}
			hospitalInfo.queryById(
				param).then(result => {
				this.nurse = result.data.data || []
			}).catch(error => {
				console.log(error);
			})
		},
		setTitle() {
			const item = this.medicalProjectList[0] || {}
			const title = item.proName || ''
			uni.setNavigationBarTitle({
				title: title
			})
		},
		radioClick() {
			this.radioSelected = !this.radioSelected
		},
		onDatePickerChange(e) {
			console.log(e);
			if (e.detail.value < this.currentDay) {
				showMsg("预约日期不能早于当前日期");
				return;
			}
			this.date = e.detail.value
		},
		patientDialogchange(e) {
			this.show = e.show
			if (e.show) {
				this.getPatientInfoList()
			}
		},
		showSelectPatientDialog() {
			this.$refs.popup.open()
		},
		closeSelectPatientDialog() {
			this.$refs.popup.close()
		},
		navToChooseHospital() {
			const list = this.medicalProjectList || []
			const itemServerIds = list.map(e => e.uid)
			if (this.currentPatientInfo.uid) {
				uni.navigateTo({
					url: `/patientAppPages/pages/chooseHospital/chooseHospital?itemServerIds=${encodeURIComponent(JSON.stringify(itemServerIds))}&patientUid=${this.currentPatientInfo.uid}`
				})
			} else {
				uni.showToast({
					title: '请先选择就诊人',
					icon: 'none'
				})
				return false
			}

		},
		
		navToChooseRule() {
			// const medicalProjectsUid = this.serverItems.medicalProjectsUid
			if (this.currentPatientInfo.uid) {
				uni.navigateTo({
					url: `/patientAppPages/pages/chooseHospitalRule/chooseHospitalRule?hospitalId=${this.rule.hospital_id}&uid=${this.rule.project_id}`
				})
			} else {
				uni.showToast({
					title: '请先选择就诊人',
					icon: 'none'
				})
				return false
			}
		
		},
		navToNewPatient() {
			uni.navigateTo({
				url: "/patientAppPages/pages/newPatient/newPatient"
			})
			this.closeSelectPatientDialog()
		},
		getPatientInfoList() {
			const param = {
				wxOpenid: uni.getStorageSync('openid_key')
			}
			patientContact.queryByPage(param).then(result => {
				this.patientInfoList = result.data.data.rows
			}).catch(error => {
				console.log(error);
			})
			let data = {
				wxOpenid: uni.getStorageSync('openid_key'),
				defaultVisitor: '是'
			}
			patientContact.queryByPage(data).then(result => {
				this.currentPatientInfo = result.data.data.rows[0] || {}
			}).catch(error => {
				console.log(error);
			})
		},
		onPatientInfoChange(e) {
			this.currentPatientInfo = this.patientInfoList[e]
			this.currentPatientInfoIndex = e
			this.closeSelectPatientDialog()
		},
		uploadImage() {
			upload.uploadImage().then(result => {
				const url = result.data.url
				console.log('url', url);
				this.imageList.push(url)
			})
		},
		removeImage(index) {
			uni.showModal({
				title: '提示',
				content: '确认删除？',
				success: (res) => {
					if (res.confirm) {
						console.log('用户点击确定');
						this.imageList.splice(index, 1)
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
		},
		showServicePopup() {
			this.$refs.servicePopup.open()
		},
		closeServicePopup() {
			this.$refs.servicePopup.close()
		},
		servicePopupChange(e) {
			this.show = e.show
			if (e.show) {
				this.servicePopupRefresh()
			}
		},
		servicePopupRefresh() {
			this.servicePopupTriggered = true
			this.servicePopupPageInfo.reset()
			this.servicePopupList = []
			this.servicePopupStatus = 'loading'
			this.getPopupMedicalProjectsList()
		},
		servicePopupLoadMore() {
			if (this.servicePopupPageInfo.isNotLoadAll) {
				this.servicePopupStatus = 'loading'
				this.servicePopupPageInfo.nextPage()
				this.getPopupMedicalProjectsList()
			} else {
				this.servicePopupStatus = 'noMore'
			}
		},
		getPopupMedicalProjectsList() {
			const param = {
				pageIndex: this.servicePopupPageInfo.pageIndex,
				pageSize: this.servicePopupPageInfo.pageSize
			}
			if (this.currentHospital) {
				param.hospitalUid = this.currentHospital.hospitalUid
			}
			medicalProjects.queryByPage(param).then(result => {
				const list = result.data.data.rows || []
				const total = result.data.data.total
				this.servicePopupList = [...this.servicePopupList, ...list]
				this.servicePopupPageInfo.total = total
				this.servicePopupPageInfo.loadedTotal = this.servicePopupList.length
				setTimeout(() => {
					if (this.servicePopupPageInfo.isNotLoadAll) {
						this.servicePopupStatus = 'more'
					} else {
						this.servicePopupStatus = 'noMore'
					}
					this.servicePopupTriggered = false
				}, 200)
			}).catch(error => {
				console.log(error);
			})
		},
		servicePopupItemClick(item) {
			this.medicalProjectList.push(item)
			this.closeServicePopup()
		},
		removeServicePopupItem(index) {
			uni.showModal({
				title: '提示',
				content: '确认删除？',
				success: (res) => {
					if (res.confirm) {
						console.log('用户点击确定');
						this.medicalProjectList.splice(index, 1)
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})

		},
		checkForm() {
			const showMsg = (msg) => {
				uni.showToast({
					title: msg,
					icon: 'none'
				})
			}
			if (!this.currentPatientInfo) {
				showMsg('就诊人不能为空')
				return false
			}
			if (!this.currentHospital) {
				showMsg('医院不能为空')
				return false
			}
			if (!this.date) {
				showMsg('服务时间不能为空')
				return false
			}
			if (!this.imageList || this.imageList.length <= 0) {
				showMsg('诊断证明不能为空')
				return false
			}
			if (!this.radioSelected) {
				showMsg('请先勾选协议')
				return false
			}
			return true
		},
		
		hospitalForm() {
			const showMsg = (msg) => {
				uni.showToast({
					title: msg,
					icon: 'none'
				})
			}
			if (!this.currentPatientInfo) {
				showMsg('就诊人不能为空')
				return false
			}
			if (!this.date) {
				showMsg('服务时间不能为空')
				return false
			}
			if (!this.imageList || this.imageList.length <= 0) {
				showMsg('诊断证明不能为空')
				return false
			}
			if (!this.radioSelected) {
				showMsg('请先勾选协议')
				return false
			}
			return true
		},
		
		submit() {
			const currentHospital = this.currentHospital
				if (currentHospital) {
					console.log('客户选的',currentHospital );
					this.handleSubmit()
				}else{
					console.log('扫码进来的' );
					this.hospitalSubmit()
				}	
		},
		
		
		handleSubmit() {
			if (!this.checkForm()) {
				return
			}
			const itemInfoReqs = []
			const currentHospital = this.currentHospital
			const currentHospitalRule = this.currentHospitalRule
			if(currentHospitalRule){
				console.log('规格' ,currentHospitalRule);
				const serverItemsRule = currentHospitalRule.serverItems || []
					serverItemsRule.forEach(e => {
						itemInfoReqs.push({
							serviceItemUid: e.medicalProjectsUid,
							serviceItem: e.proName,
							serviceItemPrice: e.totalServiceFee,
							serviceItemImg: e.picImg,
						})
					})
					this.materialFee=currentHospitalRule.serverItems[0].materialFee
				    this.totalServiceFee=currentHospitalRule.serverItems[0].totalServiceFee
			}else{
			console.log('医院' ,currentHospital);
			const serverItems = currentHospital.serverItems || []
				serverItems.forEach(e => {
					itemInfoReqs.push({
						serviceItemUid: e.medicalProjectsUid,
						serviceItem: e.proName,
						serviceItemPrice: e.actualPrice,
						serviceItemImg: e.picImg,
					})
				})	
				this.materialFee=currentHospital.serverItems[0].materialFee
				this.totalServiceFee=currentHospital.serverItems[0].totalServiceFee
			}
			const param = {
				hospitalUid: this.currentHospital.hospitalUid,
				hospitalName: this.currentHospital.hospitalName,
				// feeRules: this.currentHospital.feeRules,
				selfProvideMaterial: this.currentHospital.selfProvideMaterial,
				visitor: this.currentPatientInfo.patientName,
				// wxOpenid: uni.getStorageSync('openid_key'),
				wxOpenid: this.currentPatientInfo.uid,
				sex: this.currentPatientInfo.sex,
				age: dateUtils.getAge(this.currentPatientInfo.birthDate),
				visitorAddress: this.currentPatientInfo.serviceAddress,
				detailedAddress: this.currentPatientInfo.detailedAddress,
				itemInfoReqs: itemInfoReqs,
				materialFee:this.materialFee,
				totalServiceFee:this.totalServiceFee,
				orderTime: new Date().format('yyyy-MM-dd HH:mm:ss'),
				contactName: this.currentPatientInfo.contactPerson,
				contactPhone: this.currentPatientInfo.contactPhone,
				visitorIdNum: this.currentPatientInfo.idNum,
				diagnosisProof: this.imageList.join('|'),
				serviceTime: this.date,
				situationDesc: this.situationDesc,
				orderAmount: this.totalMoney + '',
				longitude: this.currentPatientInfo.longitude,
				latitude: this.currentPatientInfo.latitude,
				isEvaluate: '否',
			}
			console.log(JSON.stringify(param));
			orderInfo.insert(param).then(result => {
				console.log('result', JSON.stringify(result));
				this.navToDetails(result.data.data, this.currentHospital.feeRules)
			}).catch(error => {
				console.log(error);
			})
		},
		
		hospitalSubmit() {
			if (!this.hospitalForm()) {
				return
			}
			const itemInfoReqs = []
			const nurse = this.nurse
			const medicalProjectList  = this.medicalProjectList	
			const currentHospitalRule = this.currentHospitalRule
			if(currentHospitalRule){
				console.log('扫码规格' ,currentHospitalRule);
				const serverItemsRule = currentHospitalRule.serverItems || []
					serverItemsRule.forEach(e => {
						itemInfoReqs.push({
							serviceItemUid: e.medicalProjectsUid,
							serviceItem: e.proName,
							serviceItemPrice: e.totalServiceFee,
							serviceItemImg: e.picImg,
							rule: 1,
						})
					})
					this.materialFee=currentHospitalRule.serverItems[0].materialFee
				    this.totalServiceFee=currentHospitalRule.serverItems[0].totalServiceFee
					this.feeRules=currentHospitalRule.feeRules
			}else{
				console.log('扫码医院' ,medicalProjectList);
				this.medicalProjectList.forEach(e => {
					itemInfoReqs.push({
						serviceItemUid:e.uid,
						serviceItem:e.proName,
						serviceItemPrice:e.referencePrice,
						serviceItemImg:e.picImg,
					})
				})
				// this.materialFee=currentHospital.serverItems[0].materialFee
				// this.totalServiceFee=currentHospital.serverItems[0].totalServiceFee
			}
			const param = {
				hospitalUid: this.nurse.hospitalUid,
				hospitalName: this.nurse.hospitalName,
				feeRules: this.feeRules,
				selfProvideMaterial: this.nurse.selfProvideMaterial,
				visitor: this.currentPatientInfo.patientName,
				// wxOpenid: uni.getStorageSync('openid_key'),
				wxOpenid: this.currentPatientInfo.uid,
				sex: this.currentPatientInfo.sex,
				age: dateUtils.getAge(this.currentPatientInfo.birthDate),
				visitorAddress: this.currentPatientInfo.serviceAddress,
				detailedAddress: this.currentPatientInfo.detailedAddress,
				itemInfoReqs: itemInfoReqs,
				materialFee:this.materialFee,
				totalServiceFee:this.totalServiceFee,
				orderTime: new Date().format('yyyy-MM-dd HH:mm:ss'),
				contactName: this.currentPatientInfo.contactPerson,
				contactPhone: this.currentPatientInfo.contactPhone,
				visitorIdNum: this.currentPatientInfo.idNum,
				diagnosisProof: this.imageList.join('|'),
				serviceTime: this.date,
				situationDesc: this.situationDesc,
				orderAmount: this.totalMoneyRule + '',
				longitude: this.currentPatientInfo.longitude,
				latitude: this.currentPatientInfo.latitude,
				isEvaluate: '否',
			}
			console.log(JSON.stringify(param));
			orderInfo.add(param).then(result => {
				console.log('result', JSON.stringify(result));
				this.navToDetails(result.data.data, result.data.data.feeRules)
			}).catch(error => {
				console.log(error);
			})
		},
		navToDetails(orderInfo, feeRules) {
			uni.redirectTo({
				url: `/patientAppPages/pages/expenseDetail/expenseDetail?orderUid=${orderInfo.uid}&orderNum=${orderInfo.orderNum}&feeRules=${feeRules}`
			})
		},

	}
}
</script>
<style>
page {
	background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
page {
	background: #f9f9f9;
}

.container-view {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-left: 20rpx;
	padding-right: 20rpx;
	box-sizing: border-box;
	padding-bottom: 220rpx;

	.rounded-card {
		width: 100%;
		padding: 30rpx;
		background: white;
		margin-top: 20rpx;
		border-radius: 16rpx;
		box-sizing: border-box;
	}

	.rounded-card-no-padding {
		width: 100%;
		background: white;
		margin-top: 20rpx;
		border-radius: 16rpx;
		box-sizing: border-box;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #232323;
	}

	.requires::after {
		content: "*";
		color: #e74242;
	}

	.first-item {
		.top-view {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.icon {
				width: 20rpx;
				height: 20rpx;
			}

			.add-server-btn {
				height: 52rpx;
				border-radius: 10rpx;
				border: solid 1rpx #0bc5ae;
				font-size: 24rpx;
				color: #0bc5ae;
				padding: 0 14rpx;
				margin-left: 2rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.item-row {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100rpx;

			.sub-item-title {
				color: rgba(35, 35, 35, 0.4);
				font-size: 32rpx;
				font-weight: 400;
			}

			.sub-item-name {
				flex: 1;
				color: #232323;
				font-size: 32rpx;
				margin-left: 36rpx;
				font-weight: 400;
			}

			.del-btn {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	.form-item {
		width: 100%;
		min-height: 180rpx;
		padding: 30rpx;
		box-sizing: border-box;
		border-bottom: solid 1px #f8f8f8;
		display: flex;
		flex-direction: column;

		.label {
			color: #232323;
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 20rpx;

			&::after {
				content: "*";
				color: #e74242;
			}
		}

		.select-view {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;

			.content {
				color: #232323;
				width: 100%;
			}

			.placeholder {
				color: rgba(35, 35, 35, 0.4);
			}

			.icon {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.date-picker-view {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;

			.content {
				color: #232323;
				width: 100%;
			}

			.placeholder {
				color: rgba(35, 35, 35, 0.4);
			}

			.icon {
				width: 24rpx;
				height: 24rpx;
			}

			.date-picker-inner {
				display: flex;
				align-items: center;
				width: 100%;
			}
		}
	}

	.tip-view {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 22rpx;
		color: #f5803d;
	}

	.description-view {
		font-size: 26rpx;
		color: rgba(35, 35, 35, 0.4);
		margin-top: 20rpx;
	}

	.upload-grid-view {
		display: grid;
		grid-template-columns: repeat(auto-fit, calc(100% / 3));
	}

	.upload-image {
		width: 196rpx;
		height: 196rpx;
		margin-top: 30rpx;
		border-radius: 12rpx;
		position: relative;
		border: solid 2rpx #f8f8f8;

		image {
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}

		.icon {
			position: absolute;
			right: -20rpx;
			top: -20rpx;
		}
	}

	.upload-view {
		width: 196rpx;
		height: 196rpx;
		border: dashed 1rpx #969798;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #8a8a8a;
		margin-top: 30rpx;
		border-radius: 12rpx;

		.icon {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.description-input-view {
		background: #f7f7f8;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		border-radius: 20rpx;

		textarea {
			height: 220rpx;
			color: rgba(35, 35, 35, 0.4);
			font-size: 30rpx;
		}

		.textarea-placeholder {
			color: rgba(35, 35, 35, 0.4);
			font-size: 30rpx;
		}
	}
}

.bottom-fixed-view {
	position: fixed;
	bottom: 0;
	width: 100%;
	background: white;

	.agreement-view {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		border-bottom: solid 2rpx #f2f2f2;

		.text {
			color: rgba(35, 35, 35, 0.5);
		}

		.item {
			color: #0bc5ae;
		}
	}

	.pay-view {
		width: 100%;
		height: 116rpx;
		display: flex;
		align-items: center;
		padding: 30rpx;
		box-sizing: border-box;
		color: #232323;
		font-size: 26rpx;

		.show-details {
			flex: 1;
			margin-left: 28rpx;
			font-size: 24rpx;
			color: #0bc5ae;

			.icon {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.pay-btn {
			width: 228rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #0bc5ae;
			color: white;
			border-radius: 48rpx;
			font-size: 30rpx;
		}
	}
}

.popup-view {
	width: 100%;
	background: white;
	padding: 40rpx;
	box-sizing: border-box;
	border-top-left-radius: 24rpx;
	border-top-right-radius: 24rpx;
	display: flex;
	flex-direction: column;

	.title-view {
		position: relative;
		display: flex;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 10rpx 0;

		.title {
			color: #232323;
			font-size: 32rpx;
			font-weight: bold;
		}

		.close-btn-view {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 0;

			.close-btn {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	scroll-view {
		width: 100%;
		// height: 25vh;
		max-height: 25vh;
	}

	.item {
		width: 100%;
		display: flex;
		align-items: center;
		border-bottom: solid 2rpx #f8f8f8;
		padding-top: 36rpx;
		padding-bottom: 36rpx;

		radio {
			transform: scale(0.7);
		}

		.right-view {
			flex: 1;

			.name-view {
				display: flex;
				color: #232323;
				font-size: 30rpx;
				font-weight: bold;

				.phone {
					margin-left: 28rpx;
				}
			}

			.adder-view {
				color: rgba(35, 35, 35, 0.5);
				font-size: 24rpx;
			}
		}
	}

	.add-view {
		width: 100%;
		margin-top: 52rpx;
		margin-bottom: 46rpx;

		.add-btn {
			width: 100%;
			height: 88rpx;
			background: #0bc5ae;
			border-radius: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 30rpx;
		}
	}
}

.service-popup-view {
	width: 100%;
	background: white;
	padding: 40rpx;
	box-sizing: border-box;
	border-top-left-radius: 24rpx;
	border-top-right-radius: 24rpx;
	display: flex;
	flex-direction: column;

	.title-view {
		position: relative;
		display: flex;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 10rpx 0;

		.title {
			color: #232323;
			font-size: 32rpx;
			font-weight: bold;
		}

		.close-btn-view {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 0;

			.close-btn {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	scroll-view {
		width: 100%;
		height: 70vh;
	}

	.item {
		width: 100%;
		display: flex;
		align-items: center;
		border-bottom: solid 2rpx #f8f8f8;
		padding-top: 36rpx;
		padding-bottom: 36rpx;

		.left-view {
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 20rpx;
			}
		}

		.right-view {
			flex: 1;
			margin-left: 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.name-view {
				display: flex;
				color: #232323;
				font-size: 30rpx;
				font-weight: bold;
			}

			.adder-view {
				color: rgba(35, 35, 35, 0.5);
				font-size: 24rpx;
			}
		}
	}
}

.select-button {
	width: 40rpx;
	height: 40rpx;

	image {
		width: 40rpx;
		height: 40rpx;
	}
}

.cost-list {
	.row {
		display: flex;
		align-items: center;

		.left {
			min-width: 170rpx;
		}
	}
}
</style>